<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>

      <div id='templateTest1' > </div>

      <script src="/main.js"></script>
      <script>
            // var templateStr = '我买了一个{{thing}}，好{{mood}}啊！'
            // data = {
            //       thing: '小米手机',
            //       mood: '开心啊'
            // }


            var templateStr = `
                  <div>
                        {{#arr}}
                              <ul>
                                    {{name}}的爱好有：
                                    {{#hobby}}
                                          <li style="color: red;">{{.}}</li>
                                    {{/hobby}}
                              </ul>
                        {{/arr}}
                  </div>
            `;
            var data = {
                  arr: [{
                        name: '张三',
                        hobby: ['乒乓球', '篮球', '排球']
                  }, {
                        name: '李四',
                        hobby: ['足球', '网球', '乒乓球']
                  }, {
                        name: '王五',
                        hobby: ['踢毽', '雏菊', '花旦']
                  }]
            }


            var str = TemplateEngine.render(templateStr, data)
            console.log('', str)
            document.getElementById('templateTest1').innerHTML = str

      </script>
</body>

</html>